<template>
  <div>
   
    <div class="top"> 
<img src="@/assets/1.jpg" alt="" />
      <span>用户</span>
    </div>
    <ul class="bottom">
      <li>我的订单</li>
      <li>优惠券</li>
      <li>我的足迹</li>
      <li @click.self="getCollection">我的收藏</li>
      <li @click="getAddress">地址管理</li>
      <li>联系管理</li>
      <li>帮助中心</li>
      <li @click="getFeedback">意见反馈</li>
        <li>♥</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
      getCollection(){
          this.$router.push('/mine/collection')
      },
      getFeedback(){
        this.$router.push('/mine/feedback')
      },
      getAddress(){
this.$router.push('/cart/addressEdit')
      }
  },
};
</script>

<style scoped lang="scss">
.top{
    width: 100%;
    height: 3.73333rem;
    display: flex;
    align-items: center;
    background: #333;
    padding: 0 0.4rem;
    box-sizing: border-box;
    img{
        height: 1.97333rem;
    width: 1.97333rem;
    border-radius: 50%;
    // img{
    //     width: 100%;
    //     height: 100%;
    // }
    }
    span{
        color: #fff;
    font-size: .4rem;
    margin-left: .625rem;
    }
}
.bottom{
    display: flex;
    align-items: center;
    background: #fff;
    flex-wrap: wrap;
    li{
        width: 33.33%;
    padding: 0.66667rem 0;
    text-align: center;
    border-right: 0.01333rem solid rgba(0,0,0,.15);
    border-bottom: 0.01333rem solid rgba(0,0,0,.15);
    box-sizing: border-box;
}
    
}
</style>
